<script>
import dmbForm from '@/components/DmbForm'
import LTable from '@/components/LTable/index.vue'
import { defaultForm, tableBase, formItemStyle, cellStyle, headerCellStyle, tableFormStyle, formBase } from './config'
import expressForm from '@/components/DmbForm'

export default {
  name: 'warehoused',
  computed: {
    tableFormStyle() {
      return tableFormStyle
    },
    // 表头单元格样式
    headerCellStyle() {
      return headerCellStyle
    },
    // 单元格样式
    cellStyle() {
      return cellStyle
    },
    // 单个表单样式
    formItemStyle() {
      return formItemStyle
    }
  },
  components: { expressForm, LTable, dmbForm },
  data() {
    return {
      requestConfig: {
        url: '/base/manageProductStatus/queryProductStatus',
        method: 'get',
        montage: true
      },
      propsSearchForm: { ...defaultForm },
      fieldSelect: 'courierNumber',
      fieldInput: ''
    }
  },
  methods: {
    formBase() {
      return formBase
    },
    // 返回表格基础类型
    tableBase() {
      return tableBase
    },
    // 查询
    getData() {
      if(this.propsSearchForm.numbers && this.propsSearchForm.numbers.length > 0) {
        this.$refs.table.getListData()
      } else {
        this.$message.error('快递单号不可为空!')
      }
    }
  }
}
</script>

<template>
  <div>
    <div class="my-3 flex">
      <dmb-form
        :model-value="propsSearchForm"
        :form-items="formBase()"
        :item-style="formItemStyle"
        labelWidth="75px"
        @update="(row) => propsSearchForm = row"
        class="flex-1"
      />
      <div>
        <el-button type="success" @click="getData()">查询</el-button>
      </div>
    </div>
    <l-table
      ref="table"
      :prop-list="tableBase()"
      :is-operate="false"
      select-column-type="NONE"
      :props-search-form="propsSearchForm"
      :req-request="requestConfig"
      select-key="id"
      findType="findPage"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      :initialize="false"
      :change-search-form="false"
      :show-footer="true"
      :form-item-style="tableFormStyle"
    />
  </div>
</template>

<style scoped lang="scss">
.el-select .el-input {
  width: 130px;
}
</style>
